<script lang="ts">
import { defineComponent } from "vue";
import subjectSearch from "./hooks/subjectSearch";
import subjectForm from "./hooks/subjectForm";
// 图片剪辑上传组件
import ImgCutter from "../../../components/ImgCutter.vue";
import { fileServiceUrl } from "../../../config";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "TeacherList",
  components: {
    ImgCutter,
  },
  setup() {
    // 默认加载数据
    subjectSearch().getSubjectDataList();
    return {
      // 这里将代码全部分离到ts模块中
      ...subjectSearch(),
      ...subjectForm(),
      fileServiceUrl,
    };
  },
});
</script>

<template>
  <div class="role-container">
    <div class="search-box">
      <el-form ref="searchFormRef" :model="searchForm" label-suffix=":" inline>
        <el-form-item label="科目标题" prop="title">
          <el-input v-model="searchForm.title"></el-input>
        </el-form-item>
        <el-form-item label="添加时间" prop="createTimeRange">
          <el-date-picker
            v-model="searchForm.createTimeRange"
            type="daterange"
            format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-wrapper">
      <el-form-item>
        <el-button @click="addSubject">新建</el-button>
      </el-form-item>
    </div>
    <div class="table-wrapper">
      <!-- 新增/修改 对话框 -->
      <el-dialog
        v-model="visible"
        width="600px"
        title="新增/修改"
        destroy-on-close
        :close-on-click-modal="false"
        @close="resetSubjectForm"
      >
        <el-form
          ref="subjectFormRef"
          :model="subjectForm"
          :rules="rules"
          label-suffix=""
          label-width="100px"
        >
          <!-- rules 配合 prop 实现数据校验 -->
          <el-form-item label="科目标题" prop="title" align="center">
            <el-input v-model="subjectForm.title"></el-input>
          </el-form-item>

          <el-form-item label="排序" prop="sort" align="center">
            <el-input v-model="subjectForm.sort"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="visible = false">取消</el-button>
        </template>
      </el-dialog>
      <el-table
        style="font-size: 14px"
        v-loading="tableLoading"
        :data="tableData"
        size="small"
        border
        stripe
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          label="标题"
          prop="title"
          align="center"
        ></el-table-column>
        <el-table-column
          label="父id"
          prop="parentId"
          align="center"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          prop="gmtCreate"
          align="center"
        ></el-table-column>
        <el-table-column
          label="排序"
          prop="sort"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
        
            <el-button type="warning" plain @click="editSubject(row.id)"
              >修改</el-button
            >
            <el-button type="warning" plain @click="delSubject(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-wrapper">
      <el-pagination
        v-model:currentPage="searchForm.page"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind:total="total"
        @current-change="handleCurrentPageChange"
        @size-change="handlePageSizeChange"
      />
    </div>
  </div>
</template>

 



<style lang="scss" scoped>
.role-container {
  padding: 5px;
}
</style>